import { Button, Input } from 'antd'
import { useNavigate } from 'react-router-dom'
import imgLogo from './login.jpg'
import Header from "../../components/header/index";
// import { connect } from 'react-redux'
// import * as actionCreators from './store/actionCreators'
import './index.css'

function Login(props) {

    // const { myLoginData, setData } = props

     // 创建路由钩子
    const navigate = useNavigate()

    return (
        <div className="P-login">
            <Header  title="login" info={()=>{console.log('info:login')}} />
            {/* <img src={imgLogo} alt="" className="logo" /> */}
            {/* <div className="ipt-con">login store: myData = {myLoginData}</div>
            <div className="ipt-con">
                <button onClick={() => {setData('123456')}}>更改login store的myData</button>
            </div> */}
            <div className="login-input">
                <div className="ipt-con">
                    <Input placeholder="账号" />
                </div>
                <div className="ipt-con">
                    <Input.Password placeholder="密码" />
                </div>
                <div className="ipt-con">
                    <Button type="primary" block={true} onClick={()=>{navigate('/home')}}>
                        登录
                    </Button>
                </div>
            </div>
            
        </div>
    )
}

// // 把store中的数据映射到组件的props
// const mapStateToProps = (state) =>{
//     return {
//         // 数组第一个元素的login，对应的是src/store/reducer.js中定义的login分库名称
//         myLoginData: state.getIn(['login', 'myLoginData']),
//     }
// } 

// // 把store的Dispatch映射到组件的props
// const mapDispatchToProps = (dispatch) => ({
//     setData(data) {
//         const action = actionCreators.setData(data)
//         dispatch(action)
//     },
// })

export default Login
// export default connect(mapStateToProps, mapDispatchToProps)(Login)